<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + 	request.getServerPort() + request.getContextPath() + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
    <base href="<%=basePath%>">

    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <style type="text/css">
        /*类选择器*/
        .register_subs{
            border: 1px solid black;
            border-right: 0px;
            height: 30px;
            line-height: 30px;
        }
        /*属性选择器*/
        .register_subs input{
            height: 24px;
            text-align: center;
        }
        /*id选择器*/
        #register_subs{
            text-align: center;
        }

        .subs_handle{
            border: 1px solid black;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css" />
    <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin" />
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css" />
    <link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.min.css" />
    <script type="text/javascript" src="lib/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<article class="page-container">
    <form class="form form-horizontal" method="post" action="${empty register ? 'register/insert.do' : 'register/update.do'}" id="registerForm">
        <%--当regiser不为空的时候，将registerId隐藏提交给后台--%>
        <c:if test="${!empty register}">
             <input type="hidden" value="${register.registerId}" name="registerId"/>
        </c:if>
        <%--主表编辑start--%>
        <div class="row cl">
            <div class="col-xs-3 col-sm-3">
                <label class="form-label col-xs-8 col-sm-8">挂号费类型:</label>
                <div class="formControls col-xs-4 col-sm-4">
                    <select name="registerType">
                        <option value="">请选择</option>
                        <c:forEach items="${registerTypes}" var="obj">
                            <option ${obj.dictionaryId == register.registerType ? 'selected' : '' }
                                    value="${obj.dictionaryId}">${obj.dictionaryName}</option>
                        </c:forEach>
                    </select>
                </div>
            </div>

            <div class="col-xs-3 col-sm-3">
                <label class="form-label col-xs-6 col-sm-6">挂号费名称:</label>
                <div class="formControls col-xs-6 col-sm-6">
                    <input style="width: 150px" type="text" id="registerName" ${empty register ? '' : 'disabled'}
                           name="registerName" value="${register.registerName}">
                </div>
            </div>

            <div class="col-xs-2 col-sm-2 col-sm-offset-1">
                <label class="form-label col-xs-9 col-sm-9">挂号金额:</label>
                <div class="formControls col-xs-3 col-sm-3">
                    <input style="width: 50px" type="text" id="money" onkeyup="getTotalMoney()"
                           name="money" value="${register.money}">
                </div>
            </div>

            <div class="col-xs-2 col-sm-2">
                <label class="form-label col-xs-8 col-sm-8">总费用:</label>
                <div class="formControls col-xs-4 col-sm-4">
                    <input style="width: 50px" type="text" id="totalMoney" name="totalMoney" readonly="readonly">
                </div>
            </div>

        </div>
        <%--主表编辑end--%>

        <%--子表编辑start--%>
        <br>
        <div id="register_subs" class="row cl">
            <div>
                <div class="col-xs-12 col-sm-12 register_subs" style="font-size: 20px">子费用编辑</div>
            </div>
            <div>
                <div class="col-xs-5 col-sm-5 register_subs">子费用类型</div>
                <div class="col-xs-5 col-sm-5 register_subs">金额</div>
                <div class="col-xs-2 col-sm-2 register_subs subs_handle">
                    <span style="font-size: 16px;cursor: pointer;color: green"
                          class="glyphicon glyphicon-plus" onclick="add_subs();">
                    </span>
                </div>
            </div>

            <%--如果register不为空--%>
            <c:if test="${!empty register}">
                <c:forEach var="registerSub" items="${register.registerSubs}">
                    <div class="subs_detail" id="subs_detail">
                        <%--将registerSubId隐藏提交--%>
                        <input type="hidden" name="registerSubs[][registerSubId]" value="${registerSub.registerSubId}"/>

                        <div class="col-xs-5 col-sm-5 register_subs">
                            <select name="registerSubs[][registerSubType]">
                                <option value="">请选择</option>
                                <c:forEach items="${registerSubTypes}" var="obj">
                                    <option ${registerSub.registerSubType == obj.dictionaryId ? 'selected' : ''}
                                            value="${obj.dictionaryId}">${obj.dictionaryName}</option>
                                </c:forEach>
                            </select>
                        </div>

                        <div  class="col-xs-5 col-sm-5 register_subs">
                            <input type="text" class="registerSubMoney" value="${registerSub.registerSubMoney}"
                                   onkeyup="getTotalMoney()" name="registerSubs[][registerSubMoney]">
                        </div>

                        <div  class="col-xs-2 col-sm-2 register_subs subs_handle">
                            <span id="removeSpan" style="font-size: 16px; cursor: pointer; color: red"
                                  class="glyphicon glyphicon-remove" onclick="remove_subs(this);">
                            </span>
                        </div>
                    </div>
                </c:forEach>
            </c:if>

            <%--如果register为空--%>
            <c:if test="${empty register}">
                <div class="subs_detail" id="subs_detail">
                    <div class="col-xs-5 col-sm-5 register_subs">
                        <select name="registerSubs[][registerSubType]">
                            <option value="">请选择</option>
                            <c:forEach items="${registerSubTypes}" var="obj">
                                <option value="${obj.dictionaryId}">${obj.dictionaryName}</option>
                            </c:forEach>
                        </select>
                    </div>

                    <div  class="col-xs-5 col-sm-5 register_subs">
                        <input type="text" class="registerSubMoney"
                               name="registerSubs[][registerSubMoney]" onkeyup="getTotalMoney()">
                    </div>

                    <div  class="col-xs-2 col-sm-2 register_subs subs_handle">
                        <span id="removeSpan" style="font-size: 16px; cursor: pointer; color: red"
                              class="glyphicon glyphicon-remove" onclick="remove_subs(this);">
                        </span>
                    </div>
                </div>
            </c:if>
        </div>

        <div class="row cl">
            <div class="col-sm-12">
                <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
            </div>
        </div>
    </form>
</article>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript" src="lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="lib/jquery/jquery.serializejson.min.js"></script>
<script type="text/javascript">


    /**
     * 点击添加按钮新增子费用的操作
     */
    function add_subs(){
        // 0.这里规定在更新数据的情况下不能添加子费用
        if (${!empty register}){
            layer.msg("更新数据时不能添加子费用",{icon:0});
            return false;
        }

        //1.克隆id=subs_detail的商品明细div
        var subs_detail_clone = $("#subs_detail").clone();
        //2.清除所有input和select标签的内容
        subs_detail_clone.find("input").val("");
        subs_detail_clone.find("select").val("");
        //3.将克隆的div追加到外层div
        $("#register_subs").append(subs_detail_clone);
    }

    /**
     * 删除子费用
     * 	思路：获取删除按钮的父标签的父标签后进行删除整行
     */
    function remove_subs(obj){
        // 0.这里规定在更新数据的情况下不能移除子费用
        if (${!empty register}){
            layer.msg("更新数据时不能移除子费用",{icon:0});
            return false;
        }

        //1.通过类选择器获取到所有的子费用div，然后得到行数
        var subs_detail_length = $(".subs_detail").length;
        console.log(subs_detail_length); // 打印调试
        //2.当subs_detail_length还剩1个的时候就提示不能再删除了，并且返回false终止函数
        if(subs_detail_length == 1){
            layer.tips('最少需要保留一个子费用', '#removeSpan', {
                tips: [1, '#3595CC'],
                time: 2000
            });
            return false;
        }
        //3.获取删除按钮的父标签的父标签后进行删除整行
        $(obj).parent().parent().remove();

        //4.调用计算总费用的函数，重新计算总费用
        getTotalMoney();
    }

    /*
     * 计算总费用的函数
     */
    function getTotalMoney(){
        // 1.获取到挂号金额
        var registerMoney = parseFloat($("#money").val());
        var totalMoney = registerMoney;
        // 2.通过子费用div的id获取到所有输入的子费用金额find("类选择器")
        var registerSubMoneys =  $("#register_subs").find(".registerSubMoney");
        console.log("子费用的个数:",registerSubMoneys.length);
        for(var i = 0; i < registerSubMoneys.length; i++){
            totalMoney += parseFloat(registerSubMoneys[i].value);
        }
        $("#totalMoney").val(totalMoney);
    }
    /*在更新的情况下自动计算总费用*/
    $(function(){
        if (${!empty register}){
            getTotalMoney();
        }
    });

    /**
     * 表单校验和提交表单给后台
     */
    $(function(){
        $("#registerForm").validate({
            rules:{
                registerType:{
                    required:true
                },
                registerName:{
                    required:true,
                    remote:{  // 通过异步验证来判断挂号费名称是否重复，返回ture或false。达到局部刷新的效果
                        url:"register/checkRegisterName.do",
                        type:"post",
                        dataType:"json",
                        data:{
                            registerName:function(){
                                return $("#registerName").val();
                            }
                        }
                    }
                },
                money:{
                    required:true,
                    isNumber:true
                }
            },
            messages:{
                registerType:{
                    required:"请选择挂号费类型"
                },
                registerName:{
                    required:"请输入挂号费名称",
                    remote:"挂号费名称重复"
                },
                money:{
                    required:"请输入金额",
                    isNumber:"金额必须是整数或小数"
                }
            },
            submitHandler:function(form){
                // 1. 将表单序列化成json格式的对象
                var jsonData = $("#registerForm").serializeJSON();
                // 2. 将json对象转成json格式字符串(因为后台SpringMVC不能接收json对象，但是可以接收标准JSON格式字符串)
                var jsonDataString = JSON.stringify(jsonData);
                console.log(jsonDataString);
                // 3.判断子费用中的填写的数据是否有空值""，如果有空值则不能提交
                if (/\"\"/.test(jsonDataString)){
                    layer.msg("子费用中仍有数据未编辑完毕",{icon:2,time:2000});
                    return false;
                }
                // 4.使用ajax将上面的jsonDataString提交给后台
                $.ajax({
                    url:"${empty register? 'register/insert.do' : 'register/update.do'}",
                    type:"post",
                    data:jsonDataString, //提交给后台的数据(请求体)
                    contentType:"application/json;charset=utf-8",  //提交给后台的数据类型
                    success:function(data){
                        console.log(data);
                        layer.msg(data.msg,{icon:data.code},function(){
                            if(data.code == 1){  //说明新增或更新数据成功
                                parent.refreshTable();  //刷新父页面
                                parent.layer.closeAll(); //关闭父页面
                            }
                        });
                    }
                });
            }
        });
    });

</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>